import { useState } from 'react'
import { getData2 } from '../Data'
import { useMount } from 'ahooks'

import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid'

import { Tooltip, toggleClass } from '@grapecity/wijmo';

const WijmoD02 = () => {

    const [Data, setData] = useState()

    useMount(() => {
        setData(getData2(100))
    })

    const init = (init) => {
        let tooltip = new Tooltip()
        init.formatItem.addHandler((s, e) => {
            if (e.panel === s.cells) {
                let item = s.rows[e.row].dataItem,
                    bind = s.columns[e.col].binding,
                    note = item.notes ? item.notes[bind] : null
                toggleClass(e.cell, 'wj-has-notes', '123');
                // if (note !== null) {
                tooltip.setTooltip(e.cell, '<b>Note:</b><br/>' + 123);
                // }
            }
        });
        init.updatingView.addHandler(() => { tooltip.dispose(); })
    }


    if (Data) {
        return (
            <div className='Page'>
                <FlexGrid alternatingRowStep={0} lazyRender={false} initialized={init} itemsSource={Data}>
                    <FlexGridColumn binding="country" header="Country" />
                    <FlexGridColumn binding="downloads" header="Downloads" format="n0" />
                    <FlexGridColumn binding="sales" header="Sales" format="n0" />
                    <FlexGridColumn binding="expenses" header="Expenses" format="n0" />
                    <FlexGridColumn binding="num01" header="No.1" format="n0" />
                    <FlexGridColumn binding="num02" header="No.2" format="n0" />
                </FlexGrid>

                <div>判断数据中的note值</div>
                <div>css确定样式</div>
            </div>
        )
    }
}

export default WijmoD02;